<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		
		.fl{
			float: left;
		}

		ul>li{
			list-style: none;
			float: left;
			padding-left: 20px;
		}


	</style>

</head>
<body>
	<div class="big">
		<img src="../day06/img/02b.jpg" alt="">
	</div>
	<div class="small">
		<ul>
			<li><a href="#">
				<img src="../day06/img/01s.jpg" alt="">
			</a></li>
			<li><a href="#">
				<img src="../day06/img/02s.jpg" alt="">
			</a></li>
			<li><a href="#">
				<img src="../day06/img/03s.jpg" alt="">
			</a></li>
			<li><a href="#">
				<img src="../day06/img/04s.jpg" alt="">
			</a></li>
		</ul>
	</div>
</body>
<script src="../jquery-3.3.1.min.js"></script>
<script>

	var big = $(".big");

	var lis = $("li");



	for(var i = 0;i<lis.length;i++){

		lis[i].index = i+1;

		$(lis[i]).click(function(){

			// console.log(big.children()[0]);

			// console.log("../day06/img/0"+this.index+"b.jpg");

			// var p = "../day06/img/0"+this.index+"b.jpg";

			$(big.children()[0]).attr("src", "../day06/img/0"+this.index+"b.jpg");

			//为何这里不能用i，原因在于，for已经循环遍历完呢，这里的i值为5
			// imgbig.src = "img/0"+(i+1)+"b.jpg";

		})
	}

</script>
</html>